<template>
  <div class="myCard">

      <template v-if="untapped.length">
        <div class="coupon weui-flex" v-for="item in untapped" :key="item.id">
          <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">
          <div class="coupon_value" @click="detail">
            <div class="coupon_number" v-if="item.ticketType==1">{{item.discount}}</div>
            <div class="coupon_number" v-if="item.ticketType==0">{{item.description}}</div>
            <div class="spec" v-if="item.ticketType==1">折</div>
            <div class="spec" v-if="item.ticketType==0">元</div>
          </div>
          <div class="weui-flex__item coupon_info">
            <div class="coupon_title">{{item.ticketName}}</div>
            <div class="weui-flex">
              <div class="weui-flex__item coupon_condition">满{{item.leastCost*0.01}}元使用</div>
              <a class="usebtn" @click="userPon(item)">立即领取</a>
            </div>
            <div class="coupon_data">{{item.begin}} 至 {{item.end}}</div>
          </div>
        </div>
      </template>
      <div class="coupon weui-flex" v-if="!untapped.length">
        <div class="outData"  >
          <span>暂无数据</span>
        </div>
      </div>
    </div>

</template>
<script>
  import * as appId from "@/utils/util"
  import {getTIme} from "@/utils/util"
  export default{
    data(){
      return {
        current: 0,
        untapped:[],//为使用
        haveMade:[],//已使用
        expired:[],//已失效
        phone:"",
        pageNo:1,
        pageSize:10
      }
    },
    onPullDownRefresh(){
      console.log('down')
      if(this.result.length){
        this.pageNo++;
      }
      console.log(this.current)
      this.conmentMethods(this.current)

    },
    onShow(){
      wx.setNavigationBarTitle({
        title: "优惠券列表"
      })
      this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
      if(this.userInfo){
        console.log(this.userInfo)
        this.phone=this.userInfo.mobileNo;
        this.changeCurrent(this.current);
      }else{
        wx.showToast({
          title: '请登录',
          icon: 'none',
          duration: 2000
        })
      }
    },
    methods:{
      getTIme,
      changeCurrent(){
        this.current=0;
        this.pageNo=1;
        this.untapped=[];
        this.conmentMethods(this.current).then((data)=>{

        })

      },
      userPon(item){//去使用
        let that=this;
        this.$http.request({
          method: "post",
          url: "/v1.0/appletOperat/appletOperatReCou",
          body: {
            "userId":this.userInfo.baseUserId,
            "phone":that.phone,
            "productId":item.id,
            "appid":appId.appId

          },
        }).then((data)=>{
          if(data.code==0){
            wx.showToast({
              title:"领取成功",
              icon: 'success',
              duration: 2000
            })
            setTimeout(()=>{
              // let url="/pages/product/main";
              // wx.navigateTo({ url })
            },500)

          }else{

            wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
          }
        })
      },
      conmentMethods(status){
        let that=this;
        return new Promise((resolve,reject)=>{
          this.$http.request({
            method:"post",
            url:"/1.0/appletHome/appletCouponList",
            body:{
              "phone":that.phone,
              "appid":appId.appId,
              "pageNo":that.pageNo,
              "pageSize":that.pageSize,
              "status":status,
            }
          }).then((data)=>{

            if(data.code==0){
              that.result=data.result;
              if (that.pageNo > 1) {
                that.untapped.push(...data.result)
              }else{
                that.untapped=data.result;
              }
              if(that.untapped.length){
                that.untapped.forEach((a,i)=>{
                  a.begin=that.getTIme(a.beginTimestamp)
                  a.end=that.getTIme(a.endTimestamp)
                })
              }
              if(!data.result.length){
                wx.stopPullDownRefresh();

              }
              resolve(data.result)
            }else{
              that.untapped=[]
              wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
            }
          })
          //     .catch((err)=>{
          //    wx.showToast({
          //     title: "请求失败",
          //     icon: 'none',
          //     duration: 2000
          //   })
          // })
        })


      },
    }
  }
</script>
<style scoped>
  .outData{
    width:100%;text-align:center;font-size:0.8em;
  }
  .tab_line ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .tab_line ul li{
    height: 2.4em;
    line-height: 2.4em;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 0.8em;
    background: #fff;
  }
  .tab_line ul li span{
    display: inline-block;
    height: 2.4em;
  }
  .tab_line ul li.current span{
    border-bottom: 1px #FF787E solid;
    color: #FF787E;
  }
  .coupon{
    position: relative;
    margin: 0.8em 0.8em 0em 0.8em;
  }
  .coupon_bg{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .coupon_value{
    width: 33.3333%;
    text-align: center;
    position: relative;
  }
  .coupon_value .coupon_number{
    position: absolute;
    width: 100%;
    height: 2em;
    line-height: 2em;
    top: 50%;
    margin-top: -1em;
    left: 0px;
    color: #fff;
    font-size: 1em;
  }
  .coupon_value .spec{
    position: absolute;
    top: 0px;
    right: 0px;
    background: #FF787E;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    line-height: 1.4em;
    font-size: 0.8em;
    text-align: center;
    border: 1px #fff solid;
    color: #fff;
  }
  .coupon_info{
    position: relative;
    z-index: 99;
    padding: 0.6em;
  }
  .coupon_info .coupon_title{
    color: #333;
    font-size: 0.9em;
    margin-top: 0.2em;
    margin-bottom: 0.3em;
  }
  .coupon_info .coupon_condition{
    font-size: 0.8em;
    color: #FF787E;
  }
  .coupon_info .usebtn{
    width: 4.6em;
    height: 1.6em;
    color: #FF787E;
    border: 1px #FF787E solid;
    display: block;
    border-radius: 0.8em;
    line-height: 1.6em;
    text-align: center;
    font-size: 0.8em;
  }
  .coupon_info .usebtn_used{
    border: 1px #aaa solid;
    color: #999;
  }
  .coupon_data{
    font-size: 0.7em;
    color: #999;
    margin-top: 0.3em;
  }
</style>

